<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import { debounce } from '@/utils'

  export default {
    dicts: ['device_status'],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '200px'
      },
      chartData: {
        type: Object
      }
    },
    watch:{
      chartData(value){
        if(JSON.stringify(value) != '{}'){
          this.defaultData = value;
          this.initChart();
        }
      }
    },
    data() {
      return {
        chart: null
      }
    },
    mounted() {
      this.initChart()
      this.__resizeHandler = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHandler)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      window.removeEventListener('resize', this.__resizeHandler)
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons');
        let seriesData = [];
        if(!this.dict.device_status || this.dict.device_status.length == 0){
          return ;
        }
        let colors = [
          {
            itemColor: '#1BB389',
            lineColor : '#1BB389',
            areaColor : 'rgba(27, 179, 137, 0.42)'
          },
          {
            itemColor: 'rgba(30, 144, 255, 1)',
            lineColor : 'rgba(30, 144, 255, 1)',
            areaColor : 'rgba(30, 144, 255, 0.42)'
          },
          {
            itemColor: 'rgba(255, 69, 0, 1)',
            lineColor : 'rgba(255, 69, 0, 1)',
            areaColor : 'rgba(255, 69, 0, 0.32)'
          },
          {
            itemColor: 'rgba(250, 212, 0, 1)',
            lineColor : 'rgba(250, 212, 0, 1)',
            areaColor : 'rgba(250, 212, 0, 0.42)'
          },
          {
            itemColor: '#D3D8DD',
            lineColor : '#D3D8DD',
            areaColor : 'rgba(211, 216, 221, 0.42)'
          },
          {
            itemColor: 'rgb(18,234,3)',
            lineColor : 'rgb(60,232,48)',
            areaColor : 'rgb(190,229,187)'
          },
          {
            itemColor: 'rgba(0, 206, 209, 1)',
            lineColor : 'rgba(0, 206, 209, 1)',
            areaColor : 'rgba(0, 206, 209, 0.42)'
          },
          {
            itemColor: 'rgb(219,3,234)',
            lineColor : 'rgb(209,123,222)',
            areaColor : 'rgba(207,160,220,0.42)'
          }
        ];
        //组装数据
        this.dict.device_status.forEach((item, index )=> {
          const dataArr = [];
          const statusData = this.defaultData[item.value];
          let keys = Object.keys(statusData).sort();
          for (const index in keys) {
            const itemKey = keys[index];
            dataArr.push(statusData[itemKey])
          };
          seriesData.push({
            name: item.label,
            type: 'line',
            data: dataArr,
            smooth: true, // 平滑曲线
            showSymbol: false,
            itemStyle: { color: colors[index].itemColor },
            lineStyle: { width: 1, color: colors[index].lineColor },
            areaStyle: { color: colors[index].areaColor },
          });
        })
        this.chart.setOption({
          legend: {
            type: 'plain',
            top: 0,
            right: 10,
            itemGap: 10,
            itemWidth: 5,
            icon: 'circle',
            selectedMode: true,
            textStyle: { padding: [0, 0, 0, 1] },
            /*data: this.defaultData.title,*/
          },
          grid: { left: 0, top: 30, bottom: 0, right: 0, containLabel: true },
          xAxis: {
            type: 'category',
            data: this.defaultData.xAxis,
            axisLine: { lineStyle: { color: '#ccc' } },
            axisTick: { length: 3 },
            axisLabel: { color: '#999',rotate:10,interval: 0 ,
            textStyle:{
              fontSize: 10
            }},
          },
          yAxis: {
            type: 'value',
            axisLine: { show: true, lineStyle: { color: '#ccc' } },
            axisLabel: {
              color: '#999',
            },
            splitLine: { show: false },
          },
          tooltip: {
            trigger: 'axis',
            padding: [12, 17, 20, 23],
            textStyle: { color: '#424242' },
            renderMode: 'html',
            className: 'tooltip',
          },
          series: seriesData
        })
      }
    }
  }
</script>
